<template>

    <el-container style="height: 700px; border: 1px solid #eee">
        <el-header style="font-size: 30px;background-color: rgb(238, 241, 246)">图形统计</el-header>
        <el-main>
            <div id="table">
                <el-select v-model="typeselect" filterable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input v-model="begindate" placeholder="请输入开始日期" style="width: 150px;"></el-input>
                <el-input v-model="enddate" placeholder="请输入结束日期" style="width: 150px;"></el-input>
                <el-button type="primary" @click="submitresult">查找</el-button>
            </div>
            <div class="chart-container" id="line"  style="padding-top: 100px ;">
            </div>
        </el-main>
    </el-container>

</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';
import { setInterval } from 'core-js';
export default {
    data() {
        return {
            createTime: '',
            tableData: [],
            options: [{
                value: '温度',
                label: '温度传感器'
            }, {
                value: '湿度',
                label: '湿度传感器'
            }, {
                value: '光照强度',
                    label: '光敏光感器'
            }],
            typeselect: '',
            begindate: '',  //按起始时间查询
            enddate: '',  //按结束时间查询

        }
    }
    ,
    // mounted() {  // 在页面加载完成后，初始化图表和获取数据
    //     
    //     this.initChart();

    // },
    methods: {
        submitresult: function () {
            console.log(this.typeselect)
            console.log(this.begindate)
            console.log(this.enddate)
            // 在页面加载完成后，初始化图表和获取数据
            if (this.typeselect == "温度") {
                this.initChart();
                   // 使用 setInterval 设置定时器
                   this.timer = setInterval(() => {
                    //   定时向数据库中获取数据
                    axios.get("http://localhost:8888/listbytstate?begin=" + this.begindate + "&end=" + this.enddate).then((result) => {
                        console.log(result.data);
                        for (let i = 0; i < 7; i++) {
                            this.options.series[0].data[i] = result.data.data[i].tstate;
                            this.options.xAxis.data[i] = result.data.data[i].createTime.substring(0, 10);
                        }
                        console.log(result);
                    })
                    this.maychart.setOption(this.options);
                    console.log('定时器触发');
                }, 1000); // 每隔 1 秒执行一次
             
            }
            else if (this.typeselect == "湿度") {
                this.initChart();
                   // 使用 setInterval 设置定时器
                   this.timer = setInterval(() => {
                    //   定时向数据库中获取数据
                    axios.get("http://localhost:8888/listbyhstate?begin=" + this.begindate + "&end=" + this.enddate).then((result) => {
                        console.log(result.data);
                        for (let i = 0; i < 7; i++) {
                            this.options.series[0].data[i] = result.data.data[i].tstate;
                            this.options.xAxis.data[i] = result.data.data[i].createTime.substring(0, 10);
                        }
                        console.log(result);
                    })
                    this.maychart.setOption(this.options);
                    console.log('定时器触发');
                }, 1000); // 每隔 1 秒执行一次
             
            }
            else if (this.typeselect == "光照强度") {
                this.initChart();
                   // 使用 setInterval 设置定时器
                   this.timer = setInterval(() => {
                    //   定时向数据库中获取数据
                    axios.get("http://localhost:8888/listbylsstate?begin=" + this.begindate + "&end=" + this.enddate).then((result) => {
                        console.log(result.data);
                        for (let i = 0; i < 7; i++) {
                            this.options.series[0].data[i] = result.data.data[i].tstate;
                            this.options.xAxis.data[i] = result.data.data[i].createTime.substring(0, 10);
                        }
                        console.log(result);
                    })
                    this.maychart.setOption(this.options);
                    console.log('定时器触发');
                }, 1000); // 每隔 1 秒执行一次
             
            }
        },
        handleFileSelect(event) {
            // 获取用户选择的文件列表
            const selectedFiles = event.target.files;
            console.log(selectedFiles);
            const reader = new FileReader();
            reader.onload = (e) => {
// 获取文件内容
          const fileContent = e.target.result;
          console.log('文件内容：', fileContent);
        };

      // 遍历文件列表
      for (let i = 0; i < selectedFiles.length; i++) {
        const file = selectedFiles[i];

            // 创建 FileReader 对象
            const reader = new FileReader();

            // 设置 FileReader 加载完成时的回调函数
            reader.onload = (e) => {
            // 获取文件内容
            const fileContent = e.target.result;
            var option = JSON.parse(fileContent)
            this.maychart.setOption(option);
            
        };

        // 读取文件内容
        reader.readAsText(file);
        
      }
    },
        initChart() {
            // 定义图表配置项
            this.options = {
                title: {
                text: '历史数据分析'
                },
                //设置鼠标悬停在数据点上时显示的提示框
                tooltip: {
                    trigger: 'axis'
                },
                //设置图例，用于展示不同数据系列的标签，
                legend: {
                    data: ["传感器数据"]
                },
                //设置图表的网格，包括左侧边距、右侧边距、底部边距和是否包含标签等属性
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [7]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                {
                    name: '传感器数据',
                    type: 'line', //改变统计图类型
                    data: []
                    },
            
                ]
            };
            // 初始化图表实例
            this.maychart = echarts.init(document.getElementById('line'));
            // 使用配置项初始化图表
            this.maychart.setOption(this.options);
        },  
  },
  created () {   //是否已进入页面就开始获取数据
    //   // 使用 setInterval 设置定时器
    //   this.timer = setInterval(() => {
    // //   定时向数据库中获取数据
    //   axios.get("http://localhost:8888/list").then((result)=>{
    //     console.log(result.data);
    //     for(let i = 0;i <result.data.data.length; i++){
    //         this.options.series[0].data[i] = result.data.data[i].vid;
    //         this.options.series[1].data[i] = result.data.data[i].pid;
    //         this.options.series[2].data[i] = result.data.data[i].tin;
    //         this.options.series[3].data[i] = result.data.data[i].tout;
    //         this.options.series[4].data[i] = result.data.data[i].lxin;
    //         this.options.series[5].data[i] = result.data.data[i].alarm;
    //         this.options.xAxis.data[i] = result.data.data[i].createTime.substring(0,10);
    //     }
    //         console.log(result);
    //     })
    //     this.maychart.setOption(this.options);
    //   console.log('定时器触发');
    // }, 1000); // 每隔 1 秒执行一次
  }
};

</script>
<style>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>